<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>彩蛋 💖</title>
  <style>
    body {
      background: #fff0f5;
      overflow: hidden;
      margin: 0;
    }

    /* 合并公共定位样式 */
    .heart, .big-circle, .character, .ty-image, .message-box {
      position: absolute;
    }

    .heart {
      color: #ffbcd2;
      animation: heartFloat 6s linear infinite;
      cursor: pointer;
    }

    @keyframes heartFloat {
      0% { transform: translateY(100vh) scale(2); opacity: 0; }
      25%, 75% { opacity: 1; }
      100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
    }

    .big-circle {
      border-radius: 50%;
      background: radial-gradient(#fcb9cd, #fff0f5);
      animation: fadeInOut 15s ease-in-out infinite;
      z-index: 0;
    }

    @keyframes fadeInOut {
      0%, 100% { opacity: 0.2; transform: scale(0.8); }
      50% { opacity: 0.8; transform: scale(1.2); }
    }

    .hint-box {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--hint-bg);
      padding: 0.6em 1em;
      border-radius: 8px;
      box-shadow: 0 2px 8px var(--main-shadow);
      font-size: 1rem;
      z-index: 1001;
      opacity: 1;
      transition: opacity 0.5s;
    }

    .message-box {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 2em;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      max-width: 90%;
      display: none;
      text-align: center;
      z-index: 10;
    }

    button {
      padding: 0.6em 1.4em;
      border: none;
      border-radius: 24px;
      cursor: pointer;
    }

    .message-box button { background: #e91e63; color: #fff; }
    .nav button { background: #ccc; color: #444; }

    .nav { margin-top: 1.5em; }

    .character, .ty-image {
      width: 100px;
      height: 100px;
      background-size: cover;
      background-position: center;
    }

    .character { bottom: 50px; left: 50px; z-index: 1000; }
    .ty-image { bottom: 50px; right: 50px; z-index: 999; }
  </style>
</head>
<body>
  <div class="hint-box" id="hintBox">提示：使用 ← → 键移动，↑ 键跳跃</div>
  <div class="message-box" id="popup">
    <p id="dialog"></p>
    <div class="nav" id="backBtn">
      <button onclick="location.href='letter-list.html'">返回信封页</button>
    </div>
  </div>
  <div class="character" id="character"></div>
  <div class="ty-image" id="tyImage"></div>

  <div class="message-box" id="popup">
    <p id="dialog"></p>
    <div class="nav" id="backBtn">
      <button onclick="window.location.href='letter-list.html'">返回信封页</button>
    </div>
  </div>
  <div class="character" id="character"></div>
  <div class="ty-image" id="tyImage"></div>

  <script>
    // 生成爱心
    const createHeart = () => {
      const heart = document.createElement('div');
      heart.className = 'heart';
      heart.textContent = '💖';
      heart.style.left = `${Math.random() * 100}vw`;
      heart.style.fontSize = `${Math.random() * 40 + 20}px`;
      document.body.appendChild(heart);
      setTimeout(() => heart.remove(), 6000);
    };
    setInterval(createHeart, 500);

    // 生成大圆形
    const createBigCircle = () => {
      const circle = document.createElement('div');
      circle.className = 'big-circle';
      const size = Math.random() * 200 + 100;
      circle.style.width = `${size}px`;
      circle.style.height = `${size}px`;
      circle.style.left = `${Math.random() * 100}vw`;
      circle.style.top = `${Math.random() * 100}vh`;
      document.body.appendChild(circle);
    };
    for (let i = 0; i < 5; i++) createBigCircle();

    // 角色和消息相关
    const character = document.getElementById('character');
    const tyImage = document.getElementById('tyImage');
    const popup = document.getElementById('popup');
    const dialog = document.getElementById('dialog');
    const backBtn = document.getElementById('backBtn');

    const msgs = [
      "你愿意......",
      "成为我永远的女主角吗？",
      "那么接下来这段话，只说给你听：\n\n你不是我的例外，而是我满心期待的答案。"
    ];

    const state = {
      walkIndex: 0,
      characterLeft: 50,
      characterBottom: 50,
      isJumping: false,
      isMoving: false,
      jumpVelocity: 0,
      isMovingLeft: false,
      isMovingRight: false,
      tyImageChanged: false,
      messageIndex: 0
    };

    const walkImages = ['images/cx1.png', 'images/cx2.png'];
    const jumpImage = 'images/cx3.png';
    const finalCharacterImage = 'images/cx4.png';

    // 初始化图片
    tyImage.style.backgroundImage = `url(images/ty1.png)`;
    character.style.backgroundImage = `url(${walkImages[state.walkIndex]})`;

    // 行走动画
    setInterval(() => {
      if (state.isMoving && !state.isJumping) {
        state.walkIndex = (state.walkIndex + 1) % 2;
        character.style.backgroundImage = `url(${walkImages[state.walkIndex]})`;
      }
    }, 100);

    // 按键事件
    document.addEventListener('keydown', e => {
      if (state.tyImageChanged) return;
      switch(e.key) {
        case 'ArrowLeft': state.isMovingLeft = state.isMoving = true; break;
        case 'ArrowRight': state.isMovingRight = state.isMoving = true; break;
        case 'ArrowUp': 
          if (!state.isJumping) {
            state.isJumping = true;
            state.jumpVelocity = 12;
            character.style.backgroundImage = `url(${jumpImage})`;
          }
          break;
      }
    });

    document.addEventListener('keyup', e => {
      if (state.tyImageChanged) return;
      switch(e.key) {
        case 'ArrowLeft': state.isMovingLeft = false; state.isMoving = state.isMovingRight; break;
        case 'ArrowRight': state.isMovingRight = false; state.isMoving = state.isMovingLeft; break;
      }
    });

    // 物理循环
    const physicsLoop = () => {
      if (state.tyImageChanged) return;

      const moveSpeed = state.isJumping ? 8 : 5;
      let newLeft = state.characterLeft;

      if (state.isMovingLeft) newLeft -= moveSpeed;
      if (state.isMovingRight) newLeft += moveSpeed;

      if (state.isJumping) {
        state.jumpVelocity -= 0.5;
        state.characterBottom += state.jumpVelocity;
        if (state.characterBottom <= 50) {
          state.characterBottom = 50;
          state.isJumping = false;
          character.style.backgroundImage = `url(${walkImages[state.walkIndex]})`;
          state.jumpVelocity = 0;
        }
      }

      // 碰撞检测
      const charRect = {
        left: newLeft,
        right: newLeft + character.offsetWidth,
        bottom: state.characterBottom + character.offsetHeight
      };
      const tyRect = tyImage.getBoundingClientRect();

      if (charRect.right >= tyRect.left && !state.tyImageChanged) {
        tyImage.style.backgroundImage = `url(images/ty2.png)`;
        character.style.backgroundImage = `url(${finalCharacterImage})`;
        Object.assign(state, { tyImageChanged: true, isMoving: false, isMovingLeft: false, isMovingRight: false });

        dialog.textContent = msgs[0];
        backBtn.style.display = 'none';
        popup.style.display = 'block';

        setInterval(() => {
          state.messageIndex++;
          if (state.messageIndex < msgs.length) {
            dialog.textContent = msgs[state.messageIndex];
            if (state.messageIndex === msgs.length - 1) backBtn.style.display = 'block';
          }
        }, 3000);
      }

      // 边界限制
      state.characterLeft = Math.max(0, Math.min(newLeft, window.innerWidth - character.offsetWidth));
      state.characterBottom = Math.max(0, Math.min(state.characterBottom, window.innerHeight - character.offsetHeight));

      character.style.left = `${state.characterLeft}px`;
      character.style.bottom = `${state.characterBottom}px`;
      requestAnimationFrame(physicsLoop);
    };

    physicsLoop();
  </script>
</body>
</html>